<template>
    <view class="home">
        <scroll-view scroll-x class="navscroll">
            <view class="item" :class="item._id==selClassifyId ? 'active' : ''" v-for="item in classifyList"
                @click="clickNavigation(item._id)" :key="item._id">{{item.name}}</view>
        </scroll-view>
        <view class="alarmInfo">
            <uni-notice-bar v-if="alarmText" show-icon scrollable show-close @close="closeAlarmInfo"
                :text="this.alarmText"></uni-notice-bar>
        </view>

        <view class="content">
            <view @click="goDetail(item._id)" class="item" v-for="item in resourceList" :key="item._id">
                <view class="text">
                    <view class="title">{{item.title}}</view>
                    <scroll-view class="label" scroll-x="true">
                        <view style="height:0.1rem; width:29rem; color:white; margin:0.2rem 0;">
                            bug bug bug bug bug bug
                        </view>
                        <uni-tag v-for="ele in item.label" :text="ele" circle="true" inverted="true"
                            custom-style="border: 0.15rem solid #8EB97E; margin-right:0.2rem;" />
                    </scroll-view>
                    <view class="info">
                        <view class="likeCount">
                            <image src="../../static/images/fire.png" style="width: 1.5rem; height:1.5rem;"></image>
                            <text>{{item.likeCount}}</text>
                        </view>
                        <view class="createTime">公开时间：{{item.createTime}}</view>
                    </view>
                </view>

                <view class="pic">
                    <image v-if="item.headPic" mode="aspectFill" :src="item.headPic"></image>
                    <image v-else mode="aspectFill" src="../../static/images/errPic.jpg"></image>
                </view>
            </view>
        </view>
        <view class="loading" v-if="resourceList.length">
            <view v-if="loading==1">数据加载中...</view>
            <view v-if="loading==2">没有更多了~~</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                selClassifyId: '',
                classifyList: [],
                resourceList: [],
                currentPage: 1,
                // 0默认  1加载中  2没有更多了
                loading: 0,
                alarmText: "",
            }
        },
        // 首次进入时加载
        onLoad() {
            this.getClassifyData();
            this.getAlarmText();
        },
        // 触底加载更多
        onReachBottom() {
            this.loading = 1;
            this.currentPage++;
            setTimeout(() => {
                this.getResourcesData();
            }, 500);
        },
        methods: {
            // 获取导航列表类型数据
            getClassifyData() {
                uniCloud.callFunction({
                    name: "classify_mapper",
                    data: {
                        optType: "queryAll"
                    }
                }).then(res => {
                    this.classifyList = res.result.data;
                    // 初始化选中第一个
                    this.selClassifyId = this.classifyList[0]._id;
                    this.getResourcesData();
                });
            },

            // 点击导航切换
            clickNavigation(classifyId) {
                this.selClassifyId = classifyId;
                this.currentPage = 1;
                this.loading = 0;
                this.resourceList = [];
                this.getResourcesData();
            },

            // 获取资源列表
            getResourcesData() {
                uniCloud.callFunction({
                    name: "resources_mapper",
                    data: {
                        optType: "queryPage",
                        param: {
                            currentPage: this.currentPage,
                            classifyId: this.selClassifyId
                        }
                    }
                }).then(res => {
                    this.resourceList = [...this.resourceList, ...res.result.data];
                    // 底部提示
                    if (this.currentPage != 1 && res.result.data.length == 0) {
                        this.loading = 2;
                    } else {
                        this.loading = 0;
                    }
                })
            },

            // 跳转到详情页
            goDetail(resId) {
                console.log(resId);
                uni.navigateTo({
                    url: "/pages/detail/detail?id=" + resId
                })
            },

            getAlarmText() {
                uniCloud.callFunction({
                    name: "alarm_text_mapper",
                    data: {
                        version: "V2.0"
                    }
                }).then(res => {
                    this.alarmText = res.result;
                });
            },

            // 关闭告警信息
            closeAlarmInfo() {
                console.log("告警提示信息被关闭了~~~");
                // 修改元素的样式
                uni.setStorageSync('.content', `padding-top: 0rem;`);
                // 获取到要修改的元素
                uni.createSelectorQuery().select('.content').fields({
                    computedStyle: ['padding-top']
                }, (result) => {
                    // 修改元素的样式
                    uni.setStorageSync('.content', `padding-top: 0rem;`);
                }).exec();
            }
        }
    }
</script>

<style lang="scss" scoped>
    .home {
        .navscroll {
            height: 2.8rem;
            background: #F7F8FA;
            white-space: nowrap;
            position: fixed;
            top: var(--window-top);
            left: 0;
            z-index: 10;

            /deep/ ::-webkit-scrollbar {
                width: 4px !important;
                height: 1px !important;
                overflow: auto !important;
                background: transparent !important;
                -webkit-appearance: auto !important;
                display: block;
            }

            .item {
                font-size: 1.3rem;
                display: inline-block;
                line-height: 2.8rem;
                padding: 0 0.8rem;
                color: #333;

                &.active {
                    color: #31C27C;
                }
            }
        }

        .alarmInfo {
            width: 100%;
            padding-top: 2.8rem;
        }

        .content {
            padding: 0 0.3rem 0.3rem 0.3rem;

            .item {
                display: flex;
                justify-content: space-between;
                padding: 0.4rem 0.1rem;
                border-bottom: 0.12rem solid #eee;

                .text {
                    flex: 1;
                    text-align: left;

                    .title {
                        font-size: 1.6rem;
                        color: black;
                        text-align: justify;
                        text-overflow: -o-ellipsis-lastline;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                        -webkit-box-orient: vertical;
                        margin-bottom: 0.2rem;
                    }

                    .label {
                        box-sizing: content-box;
                        white-space: nowrap;
                        width: 30rem;
                        height: 2.2rem;
                        overflow: hidden;
                        padding: 0.1rem;
                    }

                    .info {
                        display: flex;
                        justify-content: space-between;

                        .likeCount {
                            flex: 1;
                            text-align: left;
                            font-size: 1.3rem;
                            color: #888;
                        }

                        .createTime {
                            text-align: right;
                            font-size: 1.3rem;
                            color: #888;
                        }
                    }
                }

                .pic {
                    text-align: right;
                    width: 16rem;
                    height: 9rem;
                    margin-left: 2.5rem;

                    image {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }

        .loading {
            text-align: center;
            font-size: 1.4rem;
            color: #888;
            line-height: 1.2rem;
            margin: 0.6rem 0;
        }
    }
</style>
